<template>
	<view class="content">
		<view class="list">
			<view v-for="(item,index) in color_arr" :key="item" class="item"
				:style="'background-color: rgb('+item+');'">
				<text v-for="text_item in list" v-if="isShow(text_item,index)">
					{{text_item}}
					<br>
				</text>
			</view>
		</view>
		<image mode="widthFix" :src="imgUrl" @click="img_click"></image>
	</view>
</template>

<script>
	import {
		http
	} from "../../utils/request.js";
	export default {
		data() {
			return {
				host: uni.getStorageSync("BASE_URL"),
				imgUrl: "",
				line_arr: [],
				color_arr: [
					"194,58,48", "0,96,152", "0,142,156", "166,33,127", "210,151,0", "246,197,130",
					"0,155,107", "143,195,31", "0,155,192", "249,231,0", "213,167,161", "91,44,104",
					"118,163,46", "179,90,32", "228,0,119", "228,96,34", "222,130,178", "163,160,173", 
					"229,6,25"
				],
				list: []
			}
		},
		created() {
			let that = this;
			http({
				url: "/prod-api/api/metro/city"
			}).then((res) => {
				that.imgUrl = that.host + res.data.data.imgUrl
			})
			http({
				url: "/prod-api/api/metro/line/list"

			}).then((res) => {
				let temp = res.data.data
				let map = new Map();
				for (let item of temp) {
					map.set(item.lineName, item.lineName)
				}
				that.list = [...map.values()].sort()
			})
		},
		methods: {
			img_click() {
				let that = this;
				uni.previewImage({
					current: that.imgUrl,
					urls: [that.imgUrl]
				})
			},
			isShow(text_item, index) {
				if ((index == 0 && (text_item == "1号线" || text_item == "八通线")) || (index == 1 && text_item == "2号线") || (
						index == 2 && text_item == "4号线大兴线") || (index == 3 && text_item == "5号线") || (index == 4 &&
						text_item == "6号线") || (index == 5 && text_item == "7号线") || (index == 6 && text_item == "8号线") ||
					(index == 7 && text_item == "9号线") || (index == 8 && text_item == "10号线") || (index == 9 &&
						text_item == "13号线") || (index == 10 && (text_item == "14号线西段" || text_item == "14号线东段")) || (
						index == 11 && text_item == "15号线") || (index == 12 && text_item == "16号线") || (index == 13 &&
						text_item == "s1线") || (index == 14 && text_item == "亦庄线") || (index == 15 && (text_item ==
						"房山线" || text_item == "燕房线")) || (index == 16 &&
						text_item == "昌平线") || (index == 17 && text_item == "机场线") || (index == 18 && text_item == "西郊线")
				) {
					return true
				}
			}

		}
	}
</script>

<style>
	page {
		width: 100%;
	}

	.content {
		display: flex;

	}

	image {
		width: 80%;
	}

	.list {
		width: 20%;
		background-color: wheat;
		display: flex;
		flex-direction: column;
	}

	.item {
		display: flex;
		flex-direction: column;
		min-height: 60rpx;
		text-align: center;
		color: white;
		padding: 10rpx;
		font-size: .8rem;
		font-weight: bolder;
		box-sizing: border-box;
	}
</style>
